<template>
  <div class="dialog-add-or-update">
    <el-dialog
      v-model="visible"
      :title="$t('order.details')"
      :close-on-click-modal="false"
      width="80%"
    >
      <el-form
        ref="dataFormRef"
        :model="dataForm"
        label-width="80px"
        @submit.prevent
        @keyup.enter="onSubmit()"
      >
        <div class="mod-order-orderInfo">
          <div class="content">
            <div class="order-number">
              <div class="number">
                <span class="text">{{ $t('order.number') }}：</span>
                {{ dataForm.orderNumber }}
              </div>
              <div class="time">
                <span class="text">{{ $t('order.createTime') }}：</span>
                {{ dataForm.createTime }}
              </div>
              {{
                [$t('order.normalOrder'), $t('order.groupPurchaseOrder'), $t('order.spikeOrder')][
                  dataForm.orderType
                ]
              }}
            </div>
            <div class="order-state">
              <div class="state-box">
                <div class="state">
                  {{
                    [
                      $t('order.waitingFosPayment'),
                      $t('order.waitiooShip'),
                      $t('order.waitingFeGoods'),
                      $t('order.waitingtion'),
                      $t('order.commoditful'),
                      $t('order.commodityFailed'),
                      $t('order.commodited')
                    ][dataForm.status - 1]
                  }}
                </div>
                <div class="state-des">
                  <div v-if="dataForm.status === 1">
                    {{ $t('order.buyerDidNTime') }}
                  </div>
                  <div v-if="dataForm.status === 2">
                    {{ $t('order.buyPleF') }}
                  </div>
                  <div v-if="dataForm.status === 3">
                    {{ $t('order.shelF') }}
                  </div>
                  <div v-if="dataForm.status === 5">
                    {{ $t('order.buyB') }}
                  </div>
                  <div v-if="dataForm.status === 6">
                    {{ $t('order.orderCanc') }}
                  </div>
                  <div v-if="dataForm.status === 7">
                    {{ $t('order.outTimeCanOrd') }}
                  </div>
                </div>
                <div class="actions">
                  <div
                    v-if="dataForm.status <= 2 && dataForm.dvyType !== 2"
                    class="default-btn text-btn"
                    @click="onChangeUserAddrOrder()"
                  >
                    {{ $t('shop.modifyShipAdd') }}
                  </div>
                </div>
              </div>
              <div class="state-steps">
                <el-form-item>
                  <el-steps
                    :active="stepsStatus"
                    align-center
                    :process-status="dataForm.status === 6 ? 'error' : 'wait'"
                  >
                    <el-step
                      :title="$t('order.submitOrders')"
                      :description="dataForm.createTime"
                    />
                    <el-step
                      :title="$t('order.theBuyerHasPaid')"
                      :description="dataForm.payTime"
                    />
                    <el-step
                      :title="
                        dataForm.dvyType === 2
                          ? $t('order.buyerHasMentioned')
                          : $t('order.shippedBySeller')
                      "
                      :description="dataForm.dvyTime"
                    />
                    <el-step
                      :title="$t('order.buyerHasReceived')"
                      :description="dataForm.finallyTime"
                    />
                  </el-steps>
                </el-form-item>
              </div>
            </div>
            <div class="packages">
              <div class="p-tab">
                <div
                  v-for="(isDeliveryExpresse, index) in dataForm.deliveryExpresses"
                  :key="index"
                  :class="indexs === index ? 'item active' : 'item'"
                  @click="onClickListDelivery(isDeliveryExpresse, index)"
                >
                  {{ $t('order.package') }}{{ index + 1 }}
                </div>
              </div>
              <div
                v-if="deliveryExpresse"
                class="p-con"
              >
                <div class="deliver-msg">
                  <div class="d-item">
                    <div class="text">
                      {{ $t('order.delType') }}：
                    </div>
                    <div class="res">
                      {{
                        [
                          $t('order.ordinaryExpress'),
                          $t('order.ordinaryExpress'),
                          $t('order.selfMention'),
                          $t('order.noNeedRequired'),
                          $t('product.sameCityDelivery')
                        ][deliveryExpresse.deliveryType] ||
                          [
                            $t('order.ordinaryExpress'),
                            $t('order.ordinaryExpress'),
                            $t('order.selfMention'),
                            $t('order.noNeedRequired')
                          ][dataForm.dvyType]
                      }}
                    </div>
                  </div>
                  <div class="d-item">
                    <div class="text">
                      {{ $t('order.deliveryTime') }}：
                    </div>
                    <div class="res">
                      {{ deliveryExpresse.createTime }}
                    </div>
                  </div>
                  <div
                    v-if="
                      deliveryExpresse.deliveryType !== 3 && deliveryExpresse.deliveryType !== 4
                    "
                    class="d-item"
                  >
                    <div class="text">
                      {{ $t('order.courierCompany') }}：
                    </div>
                    <div class="res">
                      {{ deliveryExpresse.deliveryDto.companyName }}
                    </div>
                  </div>
                  <div
                    v-if="
                      deliveryExpresse.deliveryType !== 3 && deliveryExpresse.deliveryType !== 4
                    "
                    class="d-item"
                  >
                    <div class="text">
                      {{ $t('order.waybillNumber') }}：
                    </div>
                    <div class="res">
                      {{ deliveryExpresse.deliveryDto.dvyFlowId }}
                    </div>
                  </div>
                  <div class="d-goods over">
                    <div class="arrow-box">
                      <div class="arrow prev disable" />
                      <div class="arrow next" />
                    </div>
                    <div class="goods-box">
                      <div
                        v-for="(orderItem, index) in deliveryExpresse.orderItems"
                        :key="index"
                        class="item"
                      >
                        <div class="img">
                          <img
                            v-if="orderItem.pic"
                            :src="
                              orderItem.pic.indexOf('http') === -1 &&
                                orderItem.pic.indexOf('https') === -1
                                ? resourcesUrl + orderItem.pic
                                : orderItem.pic
                            "
                            alt
                            @error="imgError(orderItem, 'pic')"
                          >
                          <img
                            v-else
                            alt=""
                            src="~@/assets/img/def.png"
                          >
                        </div>
                        <div class="name">
                          {{ orderItem.prodName }}
                        </div>
                        <div class="number">
                          {{ $t('order.num') }}：{{ orderItem.prodCount }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-if="deliveryExpresse.deliveryType !== 3 && deliveryExpresse.deliveryType !== 4"
                  class="logistics"
                >
                  <div
                    v-if="deliveryExpresse.deliveryDto && deliveryExpresse"
                    class="l-tit"
                  >
                    <span class="text">{{ $t('order.logisticsStatus') }}：</span>
                    <span
                      v-if="deliveryExpresse.deliveryDto.state === 0"
                      class="l-state"
                    >{{
                      $t('order.noRecord')
                    }}</span>
                    <span
                      v-if="deliveryExpresse.deliveryDto.state === 1"
                      class="l-state"
                    >{{
                      $t('order.collected')
                    }}</span>
                    <span
                      v-if="deliveryExpresse.deliveryDto.state === 2"
                      class="l-state"
                    >{{
                      $t('order.delivering')
                    }}</span>
                    <span
                      v-if="deliveryExpresse.deliveryDto.state === 3"
                      class="l-state"
                    >{{
                      $t('order.haveBeenReceived')
                    }}</span>
                    <span
                      v-if="deliveryExpresse.deliveryDto.state === 201"
                      class="l-state"
                    >{{
                      $t('order.reachTheDestinationCity')
                    }}</span>
                    <span
                      v-if="deliveryExpresse.deliveryDto.state === 4"
                      class="l-state"
                    >{{
                      $t('order.problemPiece')
                    }}</span>
                  </div>
                  <div
                    v-if="deliveryExpresse && deliveryExpresse.deliveryDto"
                    class="logistics-box"
                  >
                    <div
                      v-if="
                        deliveryExpresse.deliveryDto.state === 0 &&
                          dataForm.status === 5 &&
                          dataForm.finallyTime !== null
                      "
                      class="item"
                    >
                      <div class="time">
                        {{ dataForm.finallyTime }}
                      </div>
                      <div class="text">
                        {{ $t('order.receivedGoods') }}
                      </div>
                    </div>
                    <div
                      v-for="(trace, index) in deliveryExpresse.deliveryDto.traces"
                      :key="index"
                      class="item"
                    >
                      <div class="time">
                        {{ trace.acceptTime }}
                      </div>
                      <div class="text">
                        {{ trace.acceptStation }}
                      </div>
                    </div>
                    <div
                      v-if="
                        deliveryExpresse.deliveryDto.traces &&
                          deliveryExpresse.deliveryDto.traces.length < 1
                      "
                      class="item"
                    >
                      {{ $t('order.noLogisticsInformation') }}
                    </div>
                    <div
                      v-if="dataForm.status >= 3 && dataForm.dvyTime !== null"
                      class="item"
                    >
                      <div class="time">
                        {{ dataForm.dvyTime }}
                      </div>
                      <div class="text">
                        {{ $t('order.merchantHasShippedWa') }}
                      </div>
                    </div>
                    <div
                      v-if="dataForm.status >= 2 && dataForm.payTime !== null"
                      class="item"
                    >
                      <div class="time">
                        {{ dataForm.payTime }}
                      </div>
                      <div class="text">
                        {{ $t('order.buyerHasPaidWa') }}
                      </div>
                    </div>
                    <div
                      v-if="dataForm.status >= 1"
                      :class="['item', dataForm.status >= 1 ? 'left-line' : '']"
                    >
                      <div class="time">
                        {{ dataForm.createTime }}
                      </div>
                      <div class="text">
                        {{ $t('order.buyerSubmittedAnOrder') }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="order-info">
              <div class="info-item">
                <div class="item-tit">
                  {{ $t('order.recipientInformation') }}
                </div>
                <div class="item">
                  <div class="text">
                    {{
                      dataForm.dvyType === 2 ? $t('order.deliveryPerson') : $t('publics.addressee')
                    }}：
                  </div>
                  <div class="res">
                    {{ dataForm.userAddrOrder.receiver }}
                  </div>
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t('shop.contactTel') }}：
                  </div>
                  <div class="res">
                    {{ dataForm.userAddrOrder.mobile }}
                  </div>
                </div>
                <div
                  v-if="dataForm.dvyType !== 2"
                  class="item"
                >
                  <div class="text">
                    {{ $t('publics.deliveryAddr') }}：
                  </div>
                  <div class="res">
                    {{ dataForm.userAddrOrder.province }}{{ dataForm.userAddrOrder.city
                    }}{{ dataForm.userAddrOrder.area }}{{ dataForm.userAddrOrder.addr }}
                  </div>
                </div>
              </div>
              <div class="info-item">
                <div class="item-tit">
                  {{ $t('order.shippingInformation') }}
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t('order.delType') }}：
                  </div>
                  <div class="res">
                    {{
                      [
                        $t('order.ordinaryExpress'),
                        $t('order.ordinaryExpress'),
                        $t('order.buyerMention'),
                        $t('order.noNeedRequired'),
                        $t('order.sameCityDelivery')
                      ][dataForm.dvyType]
                    }}
                  </div>
                  <div
                    v-if="dataForm.dvyType === null"
                    class="res"
                  >
                    {{ $t('order.no') }}
                  </div>
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t('order.deliveryTime') }}：
                  </div>
                  <div class="res">
                    {{ dataForm.dvyTime }}
                  </div>
                  <div
                    v-if="dataForm.dvyTime === null"
                    class="res"
                  >
                    {{ $t('order.no') }}
                  </div>
                </div>
                <div
                  v-if="dataForm.dvyType === 2"
                  class="item"
                >
                  <div class="text">
                    {{ $t('station.stationNames') }}：
                  </div>
                  <div class="res">
                    {{ dataForm.stationName }}
                  </div>
                </div>
              </div>
              <div class="info-item">
                <div class="item-tit">
                  {{ $t('order.paymentInformation') }}
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t('order.actualAmount') }}：
                  </div>
                  <div class="res">
                    {{
                      dataForm.actualTotal +
                        $t('admin.dollar') +
                        ' + ' +
                        dataForm.score +
                        $t('order.integral')
                    }}
                  </div>
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t('order.paymentMethod') }}：
                  </div>
                  <div v-if="dataForm.payType === null || dataForm.status === 1">
                    {{ $t('order.unpaid') }}
                  </div>
                  <div
                    v-else
                    class="res"
                  >
                    {{
                      [
                        $t('order.pointsPayment'),
                        $t('order.wecProPay'),
                        $t('order.alipayPCPayment'),
                        $t('order.wechatScanCodePayment'),
                        $t('order.wechatH5Payment'),
                        $t('order.weclAccountPay'),
                        $t('order.alipayH5Payment'),
                        $t('order.alipayAPPPayment'),
                        $t('order.wechatAPPPayment'),
                        $t('order.balancePayment'),
                        $t('order.payPalPayment')
                      ][dataForm.payType]
                    }}
                  </div>
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t('order.paymentTime') }}：
                  </div>
                  <div class="res">
                    {{ dataForm.payTime }}
                  </div>
                  <div
                    v-if="dataForm.payTime === null"
                    class="res"
                  >
                    {{ $t('order.no') }}
                  </div>
                </div>
              </div>
              <div class="info-item">
                <div class="item-tit">
                  {{ $t('order.buyerInformation') }}
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t('order.buyerSNickname') }}：
                  </div>
                  <div class="res">
                    {{ dataForm.nickName }}
                  </div>
                  <div
                    v-if="dataForm.nickName === null"
                    class="res"
                  >
                    {{ $t('order.no') }}
                  </div>
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t('order.storeNotes') }}：
                  </div>
                  <div class="res res-ifon">
                    {{ dataForm.remarks }}
                  </div>
                  <div
                    v-if="dataForm.remarks === null || dataForm.remarks === ''"
                    class="res"
                  >
                    {{ $t('order.no') }}
                  </div>
                </div>
              </div>
            </div>
            <div class="goods-list">
              <el-table
                :data="dataForm.orderItems"
                border
              >
                <el-table-column
                  :label="$t('home.product')"
                >
                  <template #default="scope">
                    <div class="df">
                      <div class="image">
                        <ImgShow :src="scope.row.pic" />
                      </div>
                      <div class="name">
                        {{ scope.row.prodName }}
                        <div
                          v-if="
                            scope.row.returnMoneySts &&
                              scope.row.returnMoneySts < 6 &&
                              scope.row.returnMoneySts > 0
                          "
                          class="order-status"
                        >
                          {{
                            [
                              '',
                              $t('order.buyerApplication'),
                              $t('order.sellerAccepts'),
                              $t('order.buyShipment'),
                              $t('order.sellerReceipt'),
                              $t('order.refundsuccessfully')
                            ][scope.row.returnMoneySts]
                          }}
                        </div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="price"
                  :label="$t('order.unitPrice')"
                  width="180"
                  align="center"
                >
                  <template #default="scope">
                    <span>{{ scope.row.price }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="count"
                  :label="$t('order.quantity')"
                  width="180"
                  align="center"
                >
                  <template #default="scope">
                    <span>{{ scope.row.prodCount }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="count"
                  :label="$t('marketing.discountedPrice')"
                  width="180"
                  align="center"
                >
                  <template #default="scope">
                    <span>{{ scope.row.shareReduce ? scope.row.shareReduce : 0 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="totalPrice"
                  :label="$t('order.totalPrice')"
                  width="180"
                  align="center"
                >
                  <template #default="scope">
                    <span>{{ scope.row.productTotalAmount }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <div class="goods-total">
                <div class="text-box">
                  <div class="item">
                    <div class="text">
                      {{ $t('order.prodTotalPrice') }}:
                    </div>
                    <div class="number">
                      ￥{{ dataForm.total }}
                    </div>
                  </div>
                  <div
                    v-if="dataForm.reduceAmount"
                    class="item"
                  >
                    <div class="text">
                      {{ $t('marketing.discountedPrice') }}:
                    </div>
                    <div class="number">
                      ￥{{ dataForm.reduceAmount }}
                    </div>
                  </div>
                  <div
                    v-if="dataForm.freightAmount"
                    class="item"
                  >
                    <div class="text">
                      {{ $t('order.shippingFees') }}:
                    </div>
                    <div class="number">
                      ￥{{ dataForm.freightAmount }}
                    </div>
                  </div>
                  <div class="item act-price">
                    <div class="text">
                      {{ $t('order.amountDue') }}:
                    </div>
                    <div class="number">
                      {{
                        $t('order.monetaryUnit') +
                          dataForm.actualTotal +
                          (dataForm.score ? ' + ' + dataForm.score + $t('order.integral') : '')
                      }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="order-log">
              <div class="log-title">
                {{ $t('order.logs') }}
              </div>
              <div
                v-if="dataForm.createTime"
                class="log-cont"
              >
                {{ dataForm.createTime }} {{ dataForm.nickName }}
                {{ $t('order.createOrder') }}
              </div>
              <div
                v-if="dataForm.payTime"
                class="log-cont"
              >
                {{ dataForm.payTime }} {{ dataForm.nickName }}
                {{ $t('order.payment') }}
              </div>
              <div
                v-if="dataForm.dvyTime"
                class="log-cont"
              >
                {{ dataForm.dvyTime }}
                {{
                  dataForm.dvyType === 2
                    ? dataForm.nickName + $t('order.orderPickup')
                    : $t('order.deliverys')
                }}
              </div>
              <div
                v-if="dataForm.finallyTime"
                class="log-cont"
              >
                {{ dataForm.finallyTime }} {{ dataForm.nickName }}
                {{ $t('order.completed') }}
              </div>
              <div
                v-if="dataForm.cancelTime"
                class="log-cont"
              >
                {{ dataForm.cancelTime }} {{ dataForm.nickName }}
                {{ $t('order.cancelOrder') }}
              </div>
              <div
                v-if="dataForm.updateTime"
                class="log-cont"
              >
                {{ dataForm.updateTime }} {{ dataForm.nickName }}
                {{ $t('order.orderUpdate') }}
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <!-- 弹窗, 新增 / 修改 -->
      <order-addr-update
        v-if="orderAddrUpdateVisible"
        ref="orderAddrUpdateRef"
        @refresh-user-addr-order="onGetDataList"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
const dataForm = ref({
  orderId: 0,
  orderNumber: '',
  remarks: '',
  total: 0,
  deliveryExpresses: [],
  actualTotal: 0,
  dvyType: '',
  status: 1,
  addrOrderId: 0,
  nickName: '',
  orderItems: [],
  updateTime: '',
  payTime: '',
  dvyTime: '',
  finallyTime: '',
  cancelTime: '',
  orderType: '',
  userAddrOrder: {}
})

const visible = ref(false)
const orderAddrUpdateVisible = ref(false)
watch(visible, () => {
  if (!visible.value) {
    orderAddrUpdateVisible.value = false
  }
})
const stepsStatus = computed(() => {
  if (dataForm.value.finallyTime) {
    return 4
  }
  if (dataForm.value.dvyTime) {
    return 3
  }
  if (dataForm.value.payTime) {
    return 2
  }
  if (dataForm.value.createTime) {
    return 1
  }
})
const dataFormRef = ref(null)
const deliveryExpresse = ref({
  deliveryDto: {}
})

const init = orderNumber => {
  if (orderNumber === null) {
    ElMessage({
      message: $t('order.noExist'),
      type: 'error',
      duration: 1500
    })
    return false
  }
  dataForm.value.orderNumber = orderNumber || 0
  visible.value = true
  nextTick(() => {
    dataFormRef.value.resetFields()
  })
  if (dataForm.value.orderNumber) {
    // 修改
    http({
      url: http.adornUrl(`/order/delivery/orderInfo/${dataForm.value.orderNumber}`),
      method: 'get',
      params: http.adornParams()
    }).then(({ data }) => {
      dataForm.value = data
      deliveryExpresse.value = dataForm.value.deliveryExpresses[0]
    })
  }
}
const onGetDataList = () => {
  if (dataForm.value.orderNumber === null) {
    ElMessage({
      message: $t('order.noExist'),
      type: 'error',
      duration: 1500
    })
    return false
  }
  http({
    url: http.adornUrl(`/order/delivery/orderInfo/${dataForm.value.orderNumber}`),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    dataForm.value = data
    deliveryExpresse.value = dataForm.value.deliveryExpresses[0]
  })
}
/**
 * 物流事件
 */
const indexs = ref(0)
const onClickListDelivery = (delivery, index) => {
  http({
    url: http.adornUrl(`/order/delivery/deliveryOrder/${delivery.orderDeliveryId}`),
    method: 'get'
  }).then(({ data }) => {
    deliveryExpresse.value = data
  })
  indexs.value = index
}

// 修改地址
const orderAddrUpdateRef = ref(null)
const onChangeUserAddrOrder = () => {
  orderAddrUpdateVisible.value = true
  nextTick(() => {
    const data = JSON.parse(JSON.stringify(dataForm.value))
    orderAddrUpdateRef.value?.init(data)
  })
}
defineExpose({ init })
</script>

<style lang="scss" scoped>
.dialog-add-or-update {
  :deep(.el-dialog) {
    min-width: 950px;
    margin-top: 10vh !important;
  }
  .order-status {
    display: inline-block;
    margin-top: 15px;
    padding: 2px 4px;
    border: 1px solid #e43130;
    border-radius: 2px;
    color: #e43130;
    margin-right: 5px;
  }
  .left-line {
    border-left: 1px solid #fff !important;
  }
  .mod-order-orderInfo {
    height: 100%;
    width: 100%;
    font: 14px Arial, 'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
      'WenQuanYi Micro Hei', sans-serif;
    color: #333;

    .order-number {
      display: flex;
      align-items: center;
      font-size: 14px;
    }

    .order-number .text {
      color: #999;
    }

    .order-number .number,
    .order-number .time {
      display: flex;
      align-items: center;
    }

    .order-number .time {
      margin: 0 15px;
    }

    .order-state {
      position: relative;
      margin-top: 15px;
      border: 1px solid #eee;
      display: flex;
      align-items: center;
    }

    .order-state .state-box {
      padding: 20px 15px;
      width: 40%;
      border-right: 1px solid #eee;
    }

    .order-state .state-box .state {
      font-size: 20px;
      font-weight: 700;
      line-height: 28px;
    }

    .order-state .state-box .state-des {
      margin-top: 10px;
      color: #999;
    }

    .order-state .state-box .actions {
      margin-top: 15px;
    }

    .order-state .state-box .actions .item {
      display: flex;
      align-items: center;
    }

    .order-state .state-steps {
      flex: 1;
      margin-left: -80px;
    }

    .order-state .state-steps :deep(.el-form-item) {
      margin-bottom: 0;
    }

    .packages {
      margin-top: 15px;
    }

    .packages .p-tab {
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
    }

    .packages .p-tab .item {
      background: #f7f8fa;
      margin-right: -1px;
      margin-bottom: -1px;
      position: relative;
      text-align: center;
      line-height: 44px;
      width: 90px;
      cursor: pointer;
      font-size: 12px;
      font-weight: bold;
      height: 44px;
    }

    .packages .p-tab .item:first-child {
      border-radius: 3px 0 0 0;
    }

    .packages .p-tab .item:last-child {
      border-radius: 0 3px 0 0;
    }

    .packages .p-tab .item.active {
      background: #fff;
      border-bottom: 1px solid #fff;
    }

    .packages .p-con {
      border: 1px solid #eee;
      border-top: 0;
      padding: 20px;
      display: flex;
    }

    .packages .p-con .deliver-msg {
      width: 40%;
    }

    .packages .p-con .deliver-msg .d-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .packages .p-con .deliver-msg .d-item .text {
      word-break: break-word;
      width: 80px;
    }

    .packages .p-con .deliver-msg .d-goods {
      position: relative;
      width: 334px;
    }

    .packages .p-con .deliver-msg .d-goods.over {
      padding: 0 32px;
    }

    .packages .p-con .deliver-msg .d-goods .arrow-box {
      position: absolute;
      top: 40%;
      transform: translateY(-50%);
      left: 0;
      width: 100%;
      display: none;
    }

    .packages .p-con .deliver-msg .d-goods.over .arrow-box {
      display: block;
    }

    .packages .p-con .deliver-msg .d-goods .arrow-box .arrow {
      width: 22px;
      height: 22px;
      background: #eee;
      position: absolute;
      z-index: 2;
      border-radius: 50%;
      cursor: pointer;
    }

    .packages .p-con .deliver-msg .d-goods .arrow-box .arrow.disable {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .packages .p-con .deliver-msg .d-goods .arrow-box .arrow.prev {
      left: 0;
      transform: rotate(180deg);
    }

    .packages .p-con .deliver-msg .d-goods .arrow-box .arrow.next {
      right: 0;
    }

    .packages .p-con .deliver-msg .d-goods .arrow-box .arrow::before,
    .packages .p-con .deliver-msg .d-goods .arrow-box .arrow::after {
      position: absolute;
      top: 6px;
      display: block;
      width: 0;
      height: 0;
      content: ' ';
      font-size: 0;
      border: 5px solid transparent;
    }

    .packages .p-con .deliver-msg .d-goods .arrow-box .arrow::before {
      left: 10px;
      border-left: 5px solid #999;
    }

    .packages .p-con .deliver-msg .d-goods .arrow-box .arrow::after {
      left: 8px;
      border-left: 5px solid #eee;
    }

    .packages .p-con .deliver-msg .d-goods .goods-box {
      display: flex;
      overflow: hidden;
    }

    .packages .p-con .deliver-msg .d-goods .goods-box .item {
      margin-right: 10px;
      font-size: 12px;
      cursor: pointer;
    }

    .packages .p-con .deliver-msg .d-goods .goods-box .item:last-child {
      margin: 0;
    }

    .packages .p-con .deliver-msg .d-goods .goods-box .item .img {
      width: 60px;
      height: 60px;
      font-size: 0;
      margin-bottom: 3px;
    }

    .packages .p-con .deliver-msg .d-goods .goods-box .item .img img {
      width: 100%;
      height: 100%;
    }

    .packages .p-con .deliver-msg .d-goods .goods-box .item .name,
    .packages .p-con .deliver-msg .d-goods .goods-box .item .number {
      width: 60px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #999;
    }

    .packages .p-con .logistics {
      flex: 1;
    }

    .packages .p-con .logistics .l-tit {
      display: flex;
    }

    .packages .p-con .logistics .l-tit .l-state {
      color: #c00;
    }

    .packages .p-con .logistics .logistics-box {
      height: 175px;
      overflow-y: scroll;
      position: relative;
      margin-top: 15px;
    }

    .packages .p-con .logistics .logistics-box::before {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 10px;
      height: 10px;
      content: ' ';
      font-size: 0;
      background: #fff;
      z-index: 1;
    }

    .packages .p-con .logistics .logistics-box::after {
      position: absolute;
      left: 6px;
      top: 0;
      display: block;
      height: 100%;
      content: ' ';
      font-size: 0;
      background: #eee;
      z-index: 0;
    }

    .packages .p-con .logistics .logistics-box .item {
      padding: 0 0 40px 25px;
      position: relative;
      margin-left: 6px;
      border-left: 1px solid #eee;
    }

    .packages .p-con .logistics .logistics-box .item::before {
      position: absolute;
      left: -10px;
      top: 0;
      display: block;
      width: 19px;
      height: 19px;
      border-radius: 50%;
      content: ' ';
      font-size: 0;
      background: #ccc;
      border: 5px solid #fff;
      z-index: 2;
    }

    .packages .p-con .logistics .logistics-box .item:first-child:before {
      background: #c00;
    }

    .packages .p-con .logistics .logistics-box .item .time {
      color: #999;
    }

    .packages .p-con .logistics .logistics-box .item .text {
      margin-top: 5px;
      width: 400px;
    }

    .order-info {
      background: #f7f8fa;
      margin-top: 20px;
      display: flex;
      padding: 20px;
    }

    .order-info .info-item {
      width: 25%;
      padding-right: 30px;
    }

    .order-info .info-item .item-tit {
      font-weight: 600;
    }

    .order-info .info-item .item {
      margin-top: 10px;
      display: flex;
      line-height: 20px;
    }

    .order-info .info-item .item .text {
      white-space: nowrap;
    }
    .order-info .info-item .item .res {
      word-break: break-word;
    }

    .goods-list {
      margin-top: 20px;
    }

    .goods-list .image {
      width: 67px;
    }

    .goods-list .df {
      display: flex;
      align-items: center;
    }

    .goods-list .df .name {
      line-height: 20px;
      margin-left: 20px;
    }

    .goods-list .goods-total {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }

    .goods-list .goods-total .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #999;
      margin-top: 5px;
    }

    .goods-list .goods-total .item .text {
      width: 80px;
      word-break: break-word;
    }

    .goods-list .goods-total .item .number {
      text-align: right;
    }

    .goods-list .goods-total .item.act-price {
      margin-top: 20px;
      color: #333;
      font-weight: 600;
    }

    .goods-list .goods-total .item.act-price .number {
      color: #c00;
    }

    .order-log {
      margin-top: 20px;
      border-top: 1px dashed #e9eaec;
      padding: 20px 10px;
    }

    .order-log .log-title {
      height: 30px;
      width: 100%;
      line-height: 30px;
      font-weight: bold;
    }

    .order-log .log-cont {
      color: #155bd4;
      margin-top: 20px;
    }
    .res-ifon {
      word-break: break-word;
    }
  }
  :deep(.el-step.is-center .el-step__description) {
    padding-left: 20%;
    padding-right: 20%;
    min-width: 186px;
  }
}
</style>
